<template>
  <div class="dataPanel"  >
    <div class="block">
      <div class="right">
        <span class="number">{{ number }}</span>
        <span class="desc">{{ desc }}</span>
      </div>

      <div class="pic"><img :src="src" alt="" /></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      require: String,
      default: ''
    },
    number: {
      require: Number,
      default: 6666
    },
    desc: {
      require: String,
      default: '用户数量'
    }
  },
  computed: {
    src () {
      let src = ''
      switch (this.type) {
        case 'today_b':
          //   src = require('@/')
          src = require('@/assets/components/today_b.png')
          break
        case 'today_g':
          src = require('@/assets/components/today_g.png')
          break
        case 'today_p':
          src = require('@/assets/components/today_p.png')
          break
        case 'mouthAdd_o':
          src = require('@/assets/components/mouthAdd_o.png')
          break
        case 'mouthAdd_p':
          src = require('@/assets/components/mouthAdd_p.png')
          break
        case 'mouthAdd_y':
          src = require('@/assets/components/mouthAdd_y.png')
          break
        case 'user':
          src = require('@/assets/components/user.png')
          break
        case 'meetingTotal':
          src = require('@/assets/components/meetingTotal.png')
          break

        case 'total':
          src = require('@/assets/components/total.png')
          break
      }
      return src
    }
  }
}
</script>

<style lang="scss" scoped>
.block {
  width: 528px;
  height: 142px;
  border-radius: 8px;
  background:#fff;
  position: relative;
  .number {
    // position: absolute;
    // top: 37px;
    // left: 290px;
    display: block;
    font-size: 30px;
    font-weight: 600;
    margin-top: 37px;
  }
  .desc {
    // position: absolute;
    // top: 83px;
    // left: 307px;
    display: block;
    margin-top: 8px;
    font-size: 14px;

    font-weight: 400;
    color: #a5aebf;
  }
  .right{
      width: 386px;
      height: 142px;
      position: absolute;
      right: 0;
      text-align: center;
  }
  .pic {
    width: 142px;
    height: 142px;
    position: absolute;
    top: 0;
    left: 0;
    img {
      width: 100%;
    }
  }
}
</style>
